<script setup>
import { isReactive, reactive, toRef, toRefs, isRef } from 'vue';

const target = {
  name: '阿芳',
  gender: '靓妹'
}

console.log( isReactive( target ) ); // false

const user = reactive( target );
console.log( isReactive( user ) ); // true

const name = toRef( user, 'name' );
console.log( name ); // ObjectRefImpl

const gender = toRef( user, 'gender' );
console.log( gender ); // ObjectRefImpl

const customer = toRefs(user);
console.log( customer );
console.log( isReactive( customer ) ); // false
console.log( isRef( customer.name ) ); // true
console.log( isRef( customer.gender ) ); // true

setTimeout( () => {
    user.name = '小芳';
    console.log( name.value );
}, 1000);

setTimeout( () => {
    name.value = '德芳';
    console.log( user.name );
}, 3000);

</script>

<template>
  <div>
    姓名:<input v-model="user.name">
    <br>
    性别：
    <input type="radio" v-model="user.gender" value="靓仔">靓仔
    <input type="radio" v-model="user.gender" value="靓妹">靓妹
    <p>{{user.name}}</p>
    <hr>
    姓名:<input v-model="name">
    <br>
    性别：
    <input type="radio" v-model="gender" value="靓仔">靓仔
    <input type="radio" v-model="gender" value="靓妹">靓妹
    <p>{{name}}</p>
    <hr>
    姓名:<input v-model="customer.name.value">
    <br>
    性别：
    <input type="radio" v-model="customer.gender.value" value="靓仔">靓仔
    <input type="radio" v-model="customer.gender.value" value="靓妹">靓妹
    <p>{{customer.name.value}}</p>
  </div>
</template>